<script setup lang="ts">
import {onMounted, ref} from "vue";
import {homeHouse, homeMoney, homeDebt, homeSale, homePurchase, homeAud, getUserInFo} from "@/api/welcome/home.jsx"
import {getUser} from "@/utils/session.js";
import {useRouter} from 'vue-router'
//新增路由跳转
const router = useRouter();
//库存
const tableOne = ref({
  "num": 0,
  "price": 0.0
})

//首页库存
async function getHomeHouse() {
  let rs = await homeHouse(getUser().eid)
  if (rs.code == 200) {
    tableOne.value = rs.data
  }
}

//资金
const tableTwo = ref({
  "money": 0.0,
  "cards": 0
})

//首页资金
async function getHomeMoney() {
  let rs = await homeMoney(getUser().eid)
  if (rs.code == 200) {
    tableTwo.value = rs.data
  }
}

//欠款
const tableThree = ref({
  "userDebt": 0.0,
  "supDebt": 0.0
})

//首页欠款
async function getHomeDebt() {
  let rs = await homeDebt(getUser().eid)
  if (rs.code == 200) {
    tableThree.value = rs.data
  }
}

//销售
const tableFour = ref({
  "inNum": 0.0,
  "profit": 0.0
})

//首页销售
async function getHomeSale() {
  let rs = await homeSale(getUser().eid)
  if (rs.code == 200) {
    tableFour.value = rs.data
  }
}

//采购
const tableFive = ref({
  "money": 0.0,
  "category": 0
})

//首页采购
async function getHomePurchase() {
  let rs = await homePurchase(getUser().eid)
  if (rs.code == 200) {
    tableFive.value = rs.data
  }
}

//未审核单数
const tableAud = ref({
  "cgdNum": 0,
  "chdNum": 0,
  "thdNum": 0
})

//首页未审核单数
async function getHomeAud() {
  let rs = await homeAud(getUser().eid)
  if (rs.code == 200) {
    tableAud.value = rs.data
  }
}

//账号信息
const userInfo = ref({
  name: "",
  beginDate: "",
  accountNum: 0,
  expireDay: 0
})

//首页账号信息
async function getHomeUser() {
  let data = {
    "username": getUser().username
  }
  let rs = await getUserInFo(data)
  if (rs.code == 200) {
    userInfo.value = rs.data
  }
}

onMounted(() => {
  getHomeHouse()
  getHomeMoney()
  getHomeDebt()
  getHomeSale()
  getHomePurchase()
  getHomeAud()
  getHomeUser()
})
</script>
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="home">
          <span style="padding: 10px">库存总量:</span>
          <span>{{ tableOne.num }}</span>
          <br>
          <span style="padding: 10px">库存成本:</span>
          <span>{{ tableOne.price }}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="home">
          <span style="padding: 10px">现金:</span>
          <span>{{ tableTwo.money }}</span>
          <br>
          <span style="padding: 10px">银行存款:</span>
          <span>{{ tableTwo.cards }}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="home">
          <span style="padding: 10px">客户欠款:</span>
          <span>{{ tableThree.userDebt }}</span>
          <br>
          <span style="padding: 10px">供应商欠款:</span>
          <span>{{ tableThree.supDebt }}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="home">
          <span style="padding: 10px">销售收入（本月）:</span>
          <span>{{ tableFour.inNum }}</span>
          <br>
          <span style="padding: 10px">商品毛利（本月）:</span>
          <span>{{ tableFour.profit }}</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="home">
          <span style="padding: 10px">采购金额（本月）:</span>
          <span>{{ tableFive.money }}</span>
          <br>
          <span style="padding: 10px">商品种类（本月）:</span>
          <span>{{ tableFive.category }}</span>
        </div>
      </el-col>
    </el-row>
    <div class="homeTwo">
      <div class="homeTwoOne">
        <span style="font-size: 13px;margin-left: 10px">待处理事务</span>
      </div>
      <div class="homeTwoTwo">
        <div class="homeTwoThree">
          <span style="padding: 20px;font-size: 12px" @click="router.push({path:'/purchase/list'})">待审核采购单</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">)</span>
          <span style="float: right;color:red;font-size: 12px;margin-top: 4px;">{{ tableAud.cgdNum }}</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">(</span>
        </div>
      </div>
      <div class="homeTwoTwo">
        <div class="homeTwoThree">
          <span style="padding: 20px;font-size: 12px" @click="router.push({path:'/purchase/list'})">待审核退货单</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">)</span>
          <span style="float: right;color:red;font-size: 12px;margin-top: 4px;">{{ tableAud.thdNum }}</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">(</span>
        </div>
      </div>
      <div class="homeTwoTwo">
        <div class="homeTwoThree">
          <span style="padding: 20px;font-size: 12px" @click="router.push({path:'/shipment/list'})">待审核销售单</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">)</span>
          <span style="float: right;color:red;font-size: 12px;margin-top: 4px;">{{ tableAud.chdNum }}</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">(</span>
        </div>
      </div>
      <div class="homeTwoTwo">
        <div class="homeTwoThree">
          <span style="padding: 20px;font-size: 12px">待读消息</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">)</span>
          <span style="float: right;color:red;font-size: 12px;margin-top: 4px;">10</span>
          <span style="float: right;font-size: 12px;margin-top: 4px;">(</span>
        </div>
      </div>
    </div>
    <div class="homeTwo">
      <div class="homeTwoOne">
        <span style="font-size: 13px;margin:10px">快捷入口</span>
      </div>
      <div class="homeTree">
        <div class="homeTreeOne" @click="router.push({path:'/purchase/list'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 21 21"
               style="margin: 5px auto">
            <g fill="none" fillRule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="M10.5 5.5a5 5 0 0 1 4.802 6.399A2 2 0 1 1 16.5 15.5h-11a3 3 0 1 1 .1-5.998A5.002 5.002 0 0 1 10.5 5.5"></path>
              <path d="m12.5 11.5l-2 2l-2-2m2-4v6"></path>
            </g>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">采购入库</span>
        </div>
        <div class="homeTreeOne" @click="router.push({path:'/shipment/list'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 21 21"
               style="margin: 5px auto">
            <g fill="none" fillRule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <path
                d="M10.5 5.5a5 5 0 0 1 4.802 6.399A2 2 0 1 1 16.5 15.5h-11a3 3 0 1 1 .1-5.998A5.002 5.002 0 0 1 10.5 5.5"></path>
              <path d="m8.5 9.5l2-2l2 2m-2-2v6"></path>
            </g>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">销售出库</span>
        </div>
        <div class="homeTreeOne" @click="router.push({path:'/warehouse/list'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" style="margin: 5px auto"
               viewBox="0 0 24 24">
            <path fill="currentColor"
                  d="M6.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414V19a1 1 0 1 1-2 0V7.414L3.707 9.707a1 1 0 0 1-1.414-1.414zM16 16.586V5a1 1 0 1 1 2 0v11.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414z"></path>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">仓库调拨</span>
        </div>
        <div class="homeTreeOne" @click="router.push({path:'/inventory/list'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" style="margin: 5px auto"
               viewBox="0 0 24 24">
            <path fill="currentColor"
                  d="M5 10a6 6 0 0 1 11.671-1.963A6 6 0 0 1 16 20H7a5 5 0 0 1-1.986-9.59A6.071 6.071 0 0 1 5 10m6-4a4 4 0 0 0-3.903 4.879a1 1 0 0 1-.757 1.194A3.002 3.002 0 0 0 7 18h9a4 4 0 1 0-.08-8a1 1 0 0 1-1-.8A4.002 4.002 0 0 0 11 6"></path>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">库存盘点</span>
        </div>
        <div class="homeTreeOne" @click="router.push({path:'/report/purchase'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" style="margin: 5px auto"
               viewBox="0 0 24 24">
            <path fill="currentColor"
                  d="M4 4a2 2 0 0 1 2-2h8a1 1 0 0 1 .707.293l5 5A1 1 0 0 1 20 8v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm13.586 4L14 4.414V8zM12 4H6v16h12V10h-5a1 1 0 0 1-1-1zm-4 9a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1"></path>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">数据报表</span>
        </div>
        <div class="homeTreeOne" @click="router.push({path:'/goods/list'})">
          <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" style="margin: 5px auto"
               viewBox="0 0 512 512">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                  d="M80 176a16 16 0 0 0-16 16v216c0 30.24 25.76 56 56 56h272c30.24 0 56-24.51 56-54.75V192a16 16 0 0 0-16-16Zm80 0v-32a96 96 0 0 1 96-96h0a96 96 0 0 1 96 96v32"></path>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                  d="M160 224v16a96 96 0 0 0 96 96h0a96 96 0 0 0 96-96v-16"></path>
          </svg>
          <span style="font-size: 12px;margin: 0 40px;">商品管理</span>
        </div>
        <div class="homeFour">
          <div class="homeFourOne">
            <span style="font-size: 13px;margin-left: 10px">帐号状态</span>
          </div>
          <div class="homeFourTwo">
            <span class="homeFourTwo">当前版本:{{ userInfo.name }}</span><span class="homeFourThree">升级</span>
            <br>
            <span class="homeFourTwo">开通时间:{{ userInfo.beginDate }}</span>
            <br>
            <span class="homeFourTwo">账套人数:{{ userInfo.accountNum }}</span>
            <br>
            <span class="homeFourTwo">剩余可使用天数:{{ userInfo.expireDay }}天</span><span
            class="homeFourThree">续费</span>
          </div>

        </div>

      </div>
      <div class="homeSix">
        <div class="homeSixOne">
          <span style="font-size: 13px;margin:10px">业务咨询</span>
        </div>
      </div>
      <div class="homeSeven">
        <div class="homeSevenOne">
          <span style="font-size: 13px;margin:10px">APP下载</span>
        </div>
      </div>
    </div>
    <div class="homeFive">
      <div class="homeTwoOne">
        <span style="font-size: 13px;margin:10px">平台公告</span>
      </div>
    </div>

  </div>
</template>
<style scoped>
.home {
  background-color: #FFFFFF;
  width: 220px;
  height: 100px;
  border: #d3d0d0 1px solid;
  align-content: center;
  color: #888888;
  font-size: 14px;
}

.homeTwo {
  width: 800px;
  height: 120px;
  background-color: #FFFFFF;
  margin-top: 20px;
  border-bottom: #d3d0d0 1px solid;
  border-left: #d3d0d0 1px solid;
  border-right: #d3d0d0 1px solid;
}

.homeTwoOne {
  height: 30px;
  background-color: #F3F3F3;
  border-top: #d3d0d0 1px solid;
  border-bottom: #d3d0d0 1px solid;
}

.homeTwoTwo {
  width: 300px;
  float: left;
}

.homeTwoThree {
  height: 30px;
  width: 200px;
  border-bottom: #cbc6c6 1px solid;
  margin-left: 20px;
  margin-top: 10px;
  color: #737373;
  cursor: pointer;
}

.homeTwoThree:hover {
  color: rgba(20, 166, 20, 0.83);
}

.homeTree {
  display: flex;
  flex: none;
  flex-wrap: wrap;
}

.homeTreeOne {
  width: 130px;
  height: 100px;
  cursor: pointer;
  color: #888888;
}

.homeTreeOne:hover {
  background-color: #e5e3e3;
}

.homeTreeOne:hover span {
  color: rgba(20, 166, 20, 0.83);
}

.homeFour {
  width: 400px;
  height: 180px;
  background-color: #FFFFFF;
  margin-top: 10px;
  border-bottom: #d3d0d0 1px solid;
  border-left: #d3d0d0 1px solid;
  border-right: #d3d0d0 1px solid;
}

.homeFourOne {
  height: 30px;
  background-color: #F3F3F3;
  border-top: #d3d0d0 1px solid;
  border-bottom: #d3d0d0 1px solid;
}

.homeFourTwo {
  width: 300px;
  height: 120px;
  background-color: #79BCFF;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  margin-left: 30px;
}

.homeFourTwo {
  font-size: 13px;
  color: white;
  line-height: 24px;
}

.homeFourThree {
  color: red;
  font-size: 10px;
  cursor: pointer;
}
.homeFive{
  width: 450px;
  height: 260px;
  background-color: #FFFFFF;
  border-bottom: #d3d0d0 1px solid;
  border-left: #d3d0d0 1px solid;
  border-right: #d3d0d0 1px solid;
  margin-left: 820px;
  margin-top: -260px;
}
.homeSix{
  width: 400px;
  height: 180px;
  background-color: #FFFFFF;
  border-bottom: #d3d0d0 1px solid;
  border-left: #d3d0d0 1px solid;
  border-right: #d3d0d0 1px solid;
  margin-left: 420px;
  margin-top: -180px;
}
.homeSixOne{
  height: 30px;
  background-color: #F3F3F3;
  border-top: #d3d0d0 1px solid;
  border-bottom: #d3d0d0 1px solid;
}
.homeSeven{
  width: 430px;
  height: 180px;
  background-color: #FFFFFF;
  border-bottom: #d3d0d0 1px solid;
  border-left: #d3d0d0 1px solid;
  border-right: #d3d0d0 1px solid;
  margin-left: 840px;
  margin-top: -180px;
}
.homeSevenOne{
  height: 30px;
  background-color: #F3F3F3;
  border-top: #d3d0d0 1px solid;
  border-bottom: #d3d0d0 1px solid;
}
</style>
